<template>
	<div class="main">
		<Header></Header>
		<div class="content">
			<div class="headBox">
				<div class="div1 flex1 flex-right">
					<div>
						<span>今日采样数</span>
						<span>{{ sampledNumsCount.sampledDayNum }}</span>
					</div>
					<div>
						<span>累计采样数</span>
						<span>{{ sampledNumsCount.sampledNum }}</span>
						<span>个</span>
					</div>
				</div>
				<div class="div1 flex2">
					<div>
						<span>今日检测人数</span>
						<span>{{ userSumsCount.usersDayNum }}</span>
					</div>
					<div>
						<span>累计检测人数</span>
						<span>{{ userSumsCount.usersNum }}</span>
						<span>人</span>
					</div>
				</div>
				<div class="map-one">
					<div class="wanchenglv1">
						<span>检测完成率</span>
						<span>{{ completionRateCount.rate.replace(/%/g, '') }}</span>
					</div>
				</div>
				<div class="div1 flex1 flex-right">
					<div>
						<span>今日签收样本数</span>
						<span>{{ signForNumsCount.signDayNum }}</span>
					</div>
					<div>
						<span>累计签收样本数</span>
						<span>{{ signForNumsCount.signNum }}</span>
						<span>个</span>
					</div>
				</div>

				<div class="div2">
					<el-carousel direction="vertical" :autoplay="true">
						<el-carousel-item v-for="(item, index) in positiveNegative" :key="index">
							<div class="negative">
								<template v-if="index == 0">
									<div>
										<span>今日录入阴性结果数</span>
										<span>{{ item.yinResultDayNum }}</span>
									</div>
									<div>
										<span>累计结果阴性总数</span>
										<span>{{ item.yinResultNum }}</span>
									</div>
								</template>
								<template v-if="index == 1">
									<div>
										<span>今日录入阳性结果数</span>
										<span>{{ item.yangResultDayNum }}</span>
									</div>
									<div>
										<span>累计结果阳性总数</span>
										<span>{{ item.yangResultNum }}</span>
									</div>
								</template>
							</div>
						</el-carousel-item>
					</el-carousel>
				</div>
			</div>

			<div class="contentBox">
				<div class="content-left">
					<!-- 检测结果预警 -->
					<div class="warning-all">
						<div class="title">
							<img src="../assets/importantDectionIcon/img_warning_icon.png" alt="" />
							<span>检测结果预警</span>
						</div>
						<div class="warning-main">
							<div class="warning-info">
								<p class="info-title">阳性结果</p>
								<vue-seamless-scroll :data="warningList" :class-option="classOption" class="temp-tbody">
								<ul class="info-ul">
									<li class="info-li" v-for="(item, index) of warningList" :key="index">
										<!-- <el-tooltip effect="dark" :content="item.tubeCode" placement="top-start"> -->
											<span class="info-span" style="width:30%" :title="item.tubeCode">{{ item.tubeCode }}</span>
										<!-- </el-tooltip> -->
										<!-- <el-tooltip effect="dark" :content="item.detectTime" placement="top-start"> -->
											<span class="info-span" style="width:40%" :title="item.detectTime">{{ item.detectTime }}</span>
										<!-- </el-tooltip> -->
										<!-- <el-tooltip effect="dark" :content="item.dwName" placement="top-start"> -->
											<span class="info-span" style="width:30%" :title="item.dwName">{{ item.dwName }}</span>
										<!-- </el-tooltip> -->
									</li>
								</ul>
								</vue-seamless-scroll>
							</div>
							<v-chart :options="warningChart" class="warning-chart" :autoresize="true" ref="warningChart"></v-chart>
						</div>
					</div>

					<!-- 重点人员录入统计 -->
					<div class="important-all">
						<collect-batch 	:batchData="samplePeriod" @changeSamplePeriod="changeImportantData">
							<div class="collect-batch-slot">
								<p>
									今日录入重点人员人次：
									<span>{{ importantInfo.today }}人</span>
								</p>
								<p>
									累计录入重点人员期次：
									<span>{{ importantInfo.periodCount }}期</span>
									，累计
									<span>{{ importantInfo.total }}人</span>
								</p>
							</div>
						</collect-batch>
						<div class="title">
							<img src="../assets/importantDectionIcon/img_important_icon.png" alt="" />
							<span>重点人员录入统计</span>
						</div>
						<v-chart :options="importantChart" class="important-chart" :autoresize="true" ref="importantChart"></v-chart>
					</div>
				</div>

				<div class="content-center">
					<!-- 重点人员所在单位检测情况 -->
					<collect-batch :batchData="samplePeriod" @changeSamplePeriod="changeCompanyData"></collect-batch>
					<div class="title">
						<img src="../assets/importantDectionIcon/img_companyList_icon.png" alt="" />
						<span>重点人员所在单位检测情况</span>
						<div class="legend-box">
							<div class="legend color-one"></div>
							<p>已检人数</p>
							<div class="legend color-two"></div>
							<p>上报从业人数</p>
						</div>
					</div>
					<div class="progress_list">
						<div class="bar2" v-for="(item, index) in companyList" :key="index">
							<div class="bar2-top">
								<div :class="index == '0' ? 'first-child1' : index == '1' ? 'first-child2' : index == '2' ? 'first-child3' : '' + 'first-child4'">
									{{ index + 1 }}
								</div>
								<div class="name2">{{ item.dwName }}</div>
							</div>
							<div class="bar2-center">
								<span>{{ item.detected }}</span>
								<span>{{ item.total }}</span>
							</div>
							<div class="bar2-bottom">
								<div class="bar_one2">
									<div class="bar_two2" :style="'width:' + (item.detected / (parseInt(item.detected) + parseInt(item.total))) * 100 + '%'"></div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="content-right">
					<!-- 重点人员核酸检测任务完成情况 -->
					<div class="finish-all">
						<collect-batch :batchData="samplePeriod" @changeSamplePeriod="changeFinishData"></collect-batch>
						<div class="title">
							<img src="../assets/importantDectionIcon/img_finish_icon.png" alt="" />
							<span>重点人员核酸检测任务完成情况</span>
						</div>
						<v-chart :options="finishChart" class="finish-chart" :autoresize="true" ref="finishChart"></v-chart>
					</div>

					<!-- 近六期重点人员采样统计 -->
					<div class="statistic-all">
						<div class="title">
							<img src="../assets/importantDectionIcon/img_statistic_icon.png" alt="" />
							<span>近六期重点人员采样统计</span>
						</div>
						<v-chart :options="statisticChart" class="statistic-chart" :autoresize="true" ref="statisticChart"></v-chart>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
// 动态生成路由代码
// @route('/importantDection','importantDection')
import Header from '@/components/header/header.vue';
import collectBatch from '@/components/collectBatch/collectBatch.vue';
// import $ from 'jquery'
export default {
	components: {
		Header,
		collectBatch
	},
	data() {
		return {
			classOption: {
				step: 0.5
			},
			// 采样期次列表
			samplePeriod : [],
			// 顶部数据
			positiveNegative: [], //轮播图
			sampledNumsCount: {}, //今日采样点和累计
			userSumsCount: {}, //今日检测人数和累计
			resultEntryYinNumsCount: {}, //检测阴性和累计
			signForNumsCount: {}, //检测机构检测数和累计人数
			// 检测完成率
			completionRateCount: {
				rate: '',
				dayRate: ''
			},

			// 检测结果预警阳性结果
			warningList: [],
			// 检测结果预警图表数据
			warningChart: {
				tooltip: {
					trigger: 'item',
					formatter: '{b}:  </br> {c} ({d}%)',
					padding: 15,
					backgroundColor: 'rgba(0,0,0,0.6)'
				},
				color: ['rgba(7, 184, 188, .9)', 'rgba(18, 80, 193, .9)'],
				series: [
					{
						legend: {
							show: false
						},
						tooltip: {
							show: false
						},
						name: '',
						type: 'pie',
						radius: ['89%', '90%'],
						center: ['50%', '50%'],
						itemStyle: {
							color: '#999'
						},
						label: {
							show: false
						},
						data: [
							{
								value: 335,
								name: ''
							}
						],
						hoverAnimation: false
					},
					{
						legend: {
							show: false
						},
						tooltip: {
							show: false
						},
						name: '',
						type: 'pie',
						radius: ['71%', '90%'],
						center: ['50%', '50%'],
						itemStyle: {
							color: 'rgba(22, 34, 47,0.9)'
						},
						label: {
							show: false
						},
						data: [
							{
								value: 335,
								name: ''
							}
						],
						hoverAnimation: false
					},
					{
						legend: {
							show: false
						},
						tooltip: {
							show: false
						},
						name: '',
						type: 'pie',
						radius: ['70%', '71%'],
						center: ['50%', '50%'],
						itemStyle: {
							color: '#999'
						},
						label: {
							show: false
						},
						data: [
							{
								value: 335,
								name: ''
							}
						],
						hoverAnimation: false
					},
					{
						legend: {
							show: false
						},
						tooltip: {
							show: false
						},
						name: '',
						type: 'pie',
						radius: ['49%', '50%'],
						center: ['50%', '50%'],
						itemStyle: {
							color: '#999'
						},
						label: {
							show: false
						},
						data: [
							{
								value: 335,
								name: ''
							}
						],
						hoverAnimation: false
					},
					{
						legend: {
							show: false
						},
						tooltip: {
							show: false
						},
						name: '',
						type: 'pie',
						radius: ['29%', '30%'],
						center: ['50%', '50%'],
						itemStyle: {
							color: '#999'
						},
						label: {
							show: false
						},
						data: [
							{
								value: 335,
								name: ''
							}
						],
						hoverAnimation: false
					},
					{
						type: 'pie',
						radius: '70%',
						center: ['50%', '50%'],
						data: [{ value: 0, name: '阳性结果试管' }, { value: 0, name: '阴性结果试管' }],
						label: {
							show: false
						},
						labelLine: {
							normal: {
								show: false
							}
						},
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						}
					}
				]
			},

			// 重点人员录入统计录入期次统计
			importantInfo: {},
			// 重点人员录入统计图表数据
			importantChart: {
				grid: {
					left: 40,
					right: 20,
					top: '5%',
					bottom: '5%',
					containLabel: true
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow',
						shadowStyle: {
							color: '#108cc6',
							opacity: 0.2
						}
					},
					backgroundColor: 'rgba(0,0,0,0.6)',
					textStyle: {
						color: '#00f9f9'
					},
					padding: 15,
					formatter: function(params) {
						let str = '';
						for (let i = 0; i < params.length; i++) {
							if (i == 0) {
								str += `<span style="color:#ffffff">${params[i].name}</span><br/><span style="color:#00f9f9">${params[i].seriesName}：<strong>${
									params[0].value
								}</strong>人</span><br/>`;
								continue;
							}
							str += `<span style="color:#00f9f9">${params[i].seriesName}：<strong>${params[i].value}</strong>人</span><br/>`;
						}
						return str;
					}
				},
				grid: {
					top: '20%', //距上边距
					right: '0%'
				},
				legend: {
					icon: 'circle',
					left: 'right',
					itemWidth: 7,
					textStyle: {
						color: '#ffffff',
						fontSize: 12
					}
				},
				xAxis: {
					nameTextStyle: {
						color: '#cccccc'
					},
					axisLabel: {
						color: '#cccccc',
						interval: 0,
						lineStyle: {
							color: '#cccccc'
						}
					},
					data: [],
					axisTick: { show: false }
				},
				yAxis: {
					type: 'value',
					axisLine: {
						show: false
					},
					axisLabel: {
						color: '#cccccc',
						interval: 0,
						lineStyle: {
							color: '#cccccc'
						}
					},
					splitLine: {
						lineStyle: {
							color: '#625d72',
							opacity: 0.6,
							width: 1
						}
					}
				},
				axisLabel: {
					interval: 0,
					color: '#cccccc',
					fontSize: 14,
					// 坐标轴刻度标签换行处理
					formatter: function(params) {
						var newParamsName = ''; // 最终拼接成的字符串
						var paramsNameNumber = params.length; // 实际标签的个数
						var provideNumber = 4; // 每行能显示的字的个数
						var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
						/**
						 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
						 */
						// 条件等同于rowNumber>1
						if (paramsNameNumber > provideNumber) {
							/** 循环每一行,p表示行 */
							for (var p = 0; p < rowNumber; p++) {
								var tempStr = ''; // 表示每一次截取的字符串
								var start = p * provideNumber; // 开始截取的位置
								var end = start + provideNumber; // 结束截取的位置
								// 此处特殊处理最后一行的索引值
								if (p == rowNumber - 1) {
									// 最后一次不换行
									tempStr = params.substring(start, paramsNameNumber);
								} else {
									// 每一次拼接字符串并换行
									tempStr = params.substring(start, end) + '\n';
								}
								newParamsName += tempStr; // 最终拼成的字符串
							}
						} else {
							// 将旧标签的值赋给新标签
							newParamsName = params;
						}
						//将最终的字符串返回
						return newParamsName;
					}
				},
				color: ['#00f9f9', '#d23165'],
				series: [
					{
						name: '接触进口',
						type: 'bar',
						barWidth: 12,
						data: [],
						itemStyle: {
							normal: {
								label: {
									show: false, //开启显示
									position: 'top', //在上方显示
									textStyle: {
										//数值样式
										color: '#cccccc',
										fontSize: 12
									}
								}
							}
						}
					},
					{
						name: '接触非进口',
						type: 'bar',
						barWidth: 12,
						barGap: 0,
						data: [],
						itemStyle: {
							normal: {
								label: {
									show: false, //开启显示
									position: 'top', //在上方显示
									textStyle: {
										//数值样式
										color: '#cccccc',
										fontSize: 12
									}
								}
							}
						}
					}
				]
			},

			// 重点人员所在单位检测情况
			companyList: [],

			// 重点人员核酸检测任务完成情况
			finishChart: {
				grid: {
					left: 40,
					right: 20,
					top: '5%',
					bottom: '5%',
					containLabel: true
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow',
						shadowStyle: {
							color: '#108cc6',
							opacity: 0.2
						}
					},
					backgroundColor: 'rgba(0,0,0,0.6)',
					textStyle: {
						color: '#00f9f9'
					},
					padding: 15,
					formatter: function(params) {
						let str = '';
						for (let i = 0; i < params.length; i++) {
							if (i == 0) {
								str += `<span style="color:#ffffff">${params[i].name}</span><br/><span style="color:#00f9f9">${params[i].seriesName}：<strong>${
									params[0].value
								}</strong>人</span><br/>`;
								continue;
							}
							str += `<span style="color:#00f9f9">${params[i].seriesName}：<strong>${params[i].value}</strong>人</span><br/>`;
						}
						return str;
					}
				},
				grid: {
					top: '25%', //距上边距
					right: '0%'
				},
				legend: [
					{
						icon: 'circle',
						left: 'right',
						width: '40%',
						itemWidth: 7,
						textStyle: {
							color: '#ffffff',
							fontSize: 12
						}
					}
				],
				xAxis: {
					nameTextStyle: {
						color: '#cccccc'
					},
					axisLabel: {
						color: '#cccccc',
						interval: 0,
						lineStyle: {
							color: '#cccccc'
						}
					},
					data: [],
					axisTick: { show: false }
				},
				yAxis: {
					type: 'value',
					axisLine: {
						show: false
					},
					axisLabel: {
						color: '#cccccc',
						interval: 0,
						lineStyle: {
							color: '#cccccc'
						}
					},
					splitLine: {
						lineStyle: {
							color: '#625d72',
							opacity: 0.6,
							width: 1
						}
					}
				},
				axisLabel: {
					interval: 0,
					color: '#cccccc',
					fontSize: 14,
					// 坐标轴刻度标签换行处理
					formatter: function(params) {
						var newParamsName = ''; // 最终拼接成的字符串
						var paramsNameNumber = params.length; // 实际标签的个数
						var provideNumber = 4; // 每行能显示的字的个数
						var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
						/**
						 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
						 */
						// 条件等同于rowNumber>1
						if (paramsNameNumber > provideNumber) {
							/** 循环每一行,p表示行 */
							for (var p = 0; p < rowNumber; p++) {
								var tempStr = ''; // 表示每一次截取的字符串
								var start = p * provideNumber; // 开始截取的位置
								var end = start + provideNumber; // 结束截取的位置
								// 此处特殊处理最后一行的索引值
								if (p == rowNumber - 1) {
									// 最后一次不换行
									tempStr = params.substring(start, paramsNameNumber);
								} else {
									// 每一次拼接字符串并换行
									tempStr = params.substring(start, end) + '\n';
								}
								newParamsName += tempStr; // 最终拼成的字符串
							}
						} else {
							// 将旧标签的值赋给新标签
							newParamsName = params;
						}
						//将最终的字符串返回
						return newParamsName;
					}
				},
				color: ['#00f9f9', '#d23165', '#44d8a8', '#ffcc00'],
				series: [
					{
						name: '接触进口上报人数',
						type: 'bar',
						barWidth: 9,
						data: [],
						itemStyle: {
							normal: {
								label: {
									show: false, //开启显示
									position: 'top', //在上方显示
									textStyle: {
										//数值样式
										color: '#cccccc',
										fontSize: 12
									}
								}
							}
						}
					},
					{
						name: '接触非进口上报人数',
						type: 'bar',
						barWidth: 9,
						barGap: 0,
						data: [],
						itemStyle: {
							normal: {
								label: {
									show: false, //开启显示
									position: 'top', //在上方显示
									textStyle: {
										//数值样式
										color: '#cccccc',
										fontSize: 12
									}
								}
							}
						}
					},
					{
						name: '接触进口已采人数',
						type: 'bar',
						barWidth: 9,
						barGap: 0,
						data: [],
						itemStyle: {
							normal: {
								label: {
									show: false, //开启显示
									position: 'top', //在上方显示
									textStyle: {
										//数值样式
										color: '#cccccc',
										fontSize: 12
									}
								}
							}
						}
					},
					{
						name: '接触非进口已采人数',
						type: 'bar',
						barWidth: 9,
						barGap: 0,
						data: [],
						itemStyle: {
							normal: {
								label: {
									show: false, //开启显示
									position: 'top', //在上方显示
									textStyle: {
										//数值样式
										color: '#cccccc',
										fontSize: 12
									}
								}
							}
						}
					}
				]
			},
			// 近六期重点人员采样统计
			statisticChart: {
				grid: {
					left: 40,
					right: 20,
					top: '5%',
					bottom: '5%',
					containLabel: true
				},
				tooltip: {
					trigger: 'axis',
					axisPointer: {
						type: 'shadow',
						shadowStyle: {
							color: '#108cc6',
							opacity: 0.2
						}
					},
					backgroundColor: 'rgba(0,0,0,0.6)',
					textStyle: {
						color: '#00f9f9'
					},
					padding: 15,
					formatter: function(params) {
						let str = '';
						for (let i = 0; i < params.length; i++) {
							if (i == 0) {
								str += `<span style="color:#ffffff">${params[i].name}</span><br/><span style="color:#00f9f9">${params[i].seriesName}：<strong>${
									params[0].value
								}</strong>人</span><br/>`;
								continue;
							}
							str += `<span style="color:#00f9f9">${params[i].seriesName}：<strong>${params[i].value}</strong>人</span><br/>`;
						}
						return str;
					}
				},
				grid: {
					top: '20%', //距上边距
					right: '0%'
				},
				legend: {
					icon: 'circle',
					left: 'right',
					itemWidth: 7,
					textStyle: {
						color: '#ffffff',
						fontSize: 12
					}
				},
				xAxis: {
					nameTextStyle: {
						color: '#cccccc'
					},
					axisLabel: {
						color: '#cccccc',
						interval: 0,
						lineStyle: {
							color: '#cccccc'
						}
					},
					data: [],
					axisTick: { show: false }
				},
				yAxis: {
					type: 'value',
					axisLine: {
						show: false
					},
					axisLabel: {
						color: '#cccccc',
						interval: 0,
						lineStyle: {
							color: '#cccccc'
						}
					},
					splitLine: {
						lineStyle: {
							color: '#625d72',
							opacity: 0.6,
							width: 1
						}
					}
				},
				color: ['#00f9f9', '#d23165'],
				series: [
					{
						name: '上报人数',
						type: 'bar',
						barWidth: 12,
						data: [],
						itemStyle: {
							normal: {
								label: {
									show: false, //开启显示
									position: 'top', //在上方显示
									textStyle: {
										//数值样式
										color: '#cccccc',
										fontSize: 12
									}
								}
							}
						}
					},
					{
						name: '已采人数',
						type: 'bar',
						barWidth: 12,
						barGap: 0,
						data: [],
						itemStyle: {
							normal: {
								label: {
									show: false, //开启显示
									position: 'top', //在上方显示
									textStyle: {
										//数值样式
										color: '#cccccc',
										fontSize: 12
									}
								}
							}
						}
					}
				]
			}
		};
	},
	created() {
		// 获取期次列表
		this.getsamplePeriod();
		// 顶部数据
		this.sampledNums();
		this.userSums();
		this.signForNums();
		this.getResultEntryYinNums();
		this.getResultEntryYingNums();
		this.completionRate();

		// 检测结果预警阳性结果
		this.getWarningInfo();
		// 检测结果预警饼图数据
		this.getWarningData();
		// 重点人员录入统计
		this.getImportantInfo();
		this.getImportantData();
		// // 重点人员所在单位检测情况
		this.getCompanyData();

		// 重点人员核酸检测任务完成情况
		this.getFinishData();
		// 近六期重点人员采样统计
		this.getStatisticData();
	},
	methods: {
		// 重点人员录入统计期次选择
		changeImportantData(period) {
			this.getImportantData(period);
		},
		// 重点人员所在单位检测情况期次选择
		changeCompanyData(period) {
			this.getCompanyData(period);
		},
		// 重点人员核酸检测任务完成情况期次选择
		changeFinishData(period) {
			this.getFinishData(period);
		},
		// 获取期次列表
		getsamplePeriod() {
			this.$axios({
				url: '/nucleic/api/focus/querySamplSecond',
				method: 'post',
				needAuth: true,
			}).then(res => {
				if (res.code == 200) {
					this.samplePeriod = res.data;
				}
			});
		},
		//今日采样数和累计数
		sampledNums() {
			this.$axios({
				url: '/home/nucleic/sampledNums',
				method: 'post',
				needAuth: true,
				data: {
					isFocus: 1
				}
			}).then(res => {
				if (res.code == 200) {
					this.sampledNumsCount = res.data;
				}
			});
		},
		//今日检测人数和累计数
		userSums() {
			this.$axios({
				url: '/home/nucleic/userSums',
				method: 'post',
				needAuth: true,
				data: {
					isFocus: 1
				}
			}).then(res => {
				if (res.code == 200) {
					this.userSumsCount = res.data;
				}
			});
		},
		//检测机构签收样本数和累计数
		signForNums() {
			this.$axios({
				url: '/home/nucleic/signForNums',
				method: 'post',
				needAuth: true,
				data: {
					isFocus: 1
				}
			}).then(res => {
				if (res.code == 200) {
					this.signForNumsCount = res.data;
				}
			});
		},
		getResultEntryYinNums() {
			//今日录入阴性
			return new Promise((reslove, reject) => {
				this.$axios({
					url: '/home/nucleic/resultEntryYinNums',
					method: 'post',
					needAuth: true,
					data: {
						isFocus: 1
					}
				}).then(res => {
					if (res.code == 200) {
						this.positiveNegative[0] = res.data;
					}
				});
			});
		},
		getResultEntryYingNums() {
			//今日录入阳性
			return new Promise((reslove, reject) => {
				this.$axios({
					url: '/home/nucleic/resultEntryYingNums',
					method: 'post',
					needAuth: true,
					data: {
						isFocus: 1
					}
				}).then(res => {
					if (res.code == 200) {
						this.positiveNegative[1] = res.data;
					}
				});
			});
		},
		//检测完成率数据对接
		completionRate() {
			this.$axios({
				url: '/home/nucleic/completionRate',
				method: 'post',
				needAuth: true,
				data: {
					isFocus: 1
				}
			}).then(res => {
				if (res.code == 200) {
					this.completionRateCount = res.data;
				}
			});
		},

		// 检测结果预警阳性结果
		getWarningInfo() {
			this.$axios({
				url: '/nucleic/api/focus/nucleic/yangList',
				method: 'post',
				needAuth: true
			}).then(res => {
				this.warningList = res.data;
			});
		},

		// 检测结果预警饼图数据
		getWarningData() {
			this.$axios({
				url: '/nucleic/api/focus/nucleic/tubeResultPie',
				method: 'post',
				needAuth: true
			}).then(res => {
				this.warningChart.series[this.warningChart.series.length - 1].data[0].value = res.data.yang;
				this.warningChart.series[this.warningChart.series.length - 1].data[1].value = res.data.yin;
			});
		},

		// 重点人员录入统计 录入期次统计
		getImportantInfo() {
			this.$axios({
				url: '/nucleic/api/focus/nucleic/periodCount',
				method: 'post',
				needAuth: true
			}).then(res => {
				this.importantInfo = res.data;
			});
		},
		// 重点人员录入统计图表数据
		getImportantData(period = '') {
			this.$axios({
				url: '/nucleic/api/focus/nucleic/inputCount',
				method: 'post',
				needAuth: true,
				data: {
					period
				}
			}).then(res => {
				res.data.forEach((item, index) => {
					this.$set(this.importantChart.xAxis.data, index, item.name);
					this.$set(this.importantChart.series[0].data, index, item.touchCount);
					this.$set(this.importantChart.series[1].data, index, item.noTouchCount);
				});
			});
		},

		// 重点人员所在单位检测情况
		getCompanyData(period = '') {
			this.$axios({
				url: '/nucleic/api/focus/nucleic/dwCount',
				method: 'post',
				needAuth: true,
				data: {
					period
				}
			}).then(res => {
				this.companyList = res.data;
			});
		},

		// 重点人员核酸检测任务完成情况
		getFinishData(period = '') {
			this.$axios({
				url: '/nucleic/api/focus/nucleic/orgCollectCount',
				method: 'post',
				needAuth: true,
				data: {
					period
				}
			}).then(res => {
				res.data.forEach((item, index) => {
					this.$set(this.finishChart.xAxis.data, index, item.name);
					this.$set(this.finishChart.series[0].data, index, item.touchCount);
					this.$set(this.finishChart.series[1].data, index, item.noTouchCount);
					this.$set(this.finishChart.series[2].data, index, item.touchCollect);
					this.$set(this.finishChart.series[3].data, index, item.noTouchCollect);
				});
			});
		},

		// 近六期重点人员采样统计
		getStatisticData() {
			this.$axios({
				url: '/nucleic/api/focus/nucleic/periodFocusCount',
				method: 'post',
				needAuth: true
			}).then(res => {
				res.data.forEach((item, index) => {
					this.$set(this.statisticChart.xAxis.data, index, item.samplePeriod);
					this.$set(this.statisticChart.series[0].data, index, item.total);
					this.$set(this.statisticChart.series[1].data, index, item.collected);
				});
			});
		}
	}
};
</script>

<style scoped lang="less">
.main {
	background-size: 100% auto;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
}
// 标题统一样式
.title {
	color: #f0f0f0;
	display: flex;
	align-items: center;
	margin: 20px 0px;
	cursor: default;
	img {
		// width: 27px;
		height: 27px;
		margin-right: 10px;
	}
	span {
		flex: 1;
		align-items: center;
		font-size: 18px;
	}
	.legend-box {
		display: flex;
		align-items: center;
		.legend {
			width: 19px;
			height: 12px;
			border-radius: 6px;
			margin-right: 9px;
		}
		.color-one {
			background-color: #3ae2e2;
		}
		.color-two {
			margin-left: 20px;
			background-color: #f5d08b;
		}
	}
}

.collect-batch-slot {
	font-size: 18;
	color: #ffffff;
	span {
		color: #00f9f9;
	}
}

.content {
	color: #fff;
	overflow: hidden;
	height: calc(100% - 101px);
	display: flex;
	flex-direction: column;
	padding: 0 30px;
	box-sizing: border-box;
	padding-bottom: 20px;
	margin-top: 40px;
	.headBox {
		height: 150px;
		display: flex;
		justify-content: space-between;
		// overflow: hidden;
		.map-one {
			-webkit-user-select: none;
			-moz-user-select: none;
			-o-user-select: none;
			user-select: none;
			width: 402px;
			height: 141px;
			background: url('../assets/bgjiance.png') no-repeat;
			background-size: 100% 100%;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			margin: 0px 105px;
			.wanchenglv1 {
				display: flex;
				height: 100%;
				align-items: center;
				span {
					&:nth-child(1) {
						margin-left: 36px;
						width: 90px;
						font-size: 18px;
						color: #f0f0f0;
					}
					&:nth-child(2) {
						flex: 1;
						text-align: center;
						font-size: 66px;
						background-image: -webkit-linear-gradient(bottom, #eeba64, #ffefc4);
						-webkit-background-clip: text;
						-webkit-text-fill-color: transparent;
						font-weight: bold;
						line-height: 60px;
						&::after {
							content: '%';
							font-size: 33px;
							background-image: -webkit-linear-gradient(bottom, #eeba64, #ffefc4);
							-webkit-background-clip: text;
							-webkit-text-fill-color: transparent;
						}
					}
				}
			}
		}
		.div1 {
			flex: 1;
			width: 291px;
			height: 120px;
			padding-left: 14px;
			color: #f0f0f0;
			font-size: 16px;
			display: flex;
			flex-direction: column;
			margin-left: 30px;
			background-color: rgba(41, 49, 64, 0.2);
			border: solid 1px rgba(20, 206, 214, 0.2);
			div {
				flex: 1;
				display: flex;
				align-items: center;
				&:nth-child(1) {
					span {
						&:nth-child(1) {
							// width: 110px;
							margin-right: 13px;
						}
						&:nth-child(2) {
							color: #00f9f9;
							font-size: 32px;
						}
					}
				}
				&:nth-child(2) {
					span {
						&:nth-child(1) {
							// width: 110px;
							margin-right: 13px;
						}
						&:nth-child(2) {
							color: #44d8a8;
							font-size: 24px;
						}
						&:nth-child(3) {
							color: #44d8a8;
							font-size: 14px;
							margin-left: 4px;
							margin-top: 10px;
						}
					}
				}
			}
		}
		.flex-right {
			margin-right: 30px;
			margin-left: 0px;
		}
		.div2 {
			flex: 1;
			width: 291px;
			height: 120px;
			padding-left: 14px;
			color: #f0f0f0;
			font-size: 16px;
			display: flex;
			flex-direction: column;
			margin-left: 30px;
			background-color: rgba(41, 49, 64, 0.2);
			border: solid 1px rgba(20, 206, 214, 0.2);
			.negative {
				height: 102px;
				display: flex;
				padding-right: 30px;
				flex-direction: column;
				justify-content: center;
				div {
					flex: 1;
					display: flex;
					align-items: center;
					&:nth-child(1) {
						span {
							&:nth-child(1) {
								// width: 110px;
								margin-right: 13px;
							}
							&:nth-child(2) {
								color: #00f9f9;
								font-size: 32px;
							}
						}
					}
					&:nth-child(2) {
						span {
							&:nth-child(1) {
								// width: 110px;
								margin-right: 13px;
							}
							&:nth-child(2) {
								color: #44d8a8;
								font-size: 24px;
								&::after {
									content: '个';
									color: #44d8a8;
									font-size: 14px;
									margin-left: 4px;
								}
							}
						}
					}
				}
			}
		}
		.flex5 {
			flex: 1;
			display: flex;
		}
		.flex1 {
			flex: 1;
		}

		.flex2 {
			flex: 1;
			div {
				&:nth-child(2) {
					span {
						&:nth-child(1) {
							// width: 110px;
							margin-right: 13px;
						}
						&:nth-child(2) {
							color: #44d8a8;
							font-size: 24px;
							&:nth-child(3) {
								color: #44d8a8;
								font-size: 14px;
								margin-left: 4px;
								margin-top: 10px;
							}
						}
					}
				}
			}
		}
		// :last-child {
		// 	margin-right: 0;
		// }
	}

	.contentBox {
		flex: 1;
		display: flex;
		justify-content: space-between;
		width: 100%;
		overflow: hidden;
		.content-left {
			height: 100%;
			width: 630px;

			// 检测结果预警
			.warning-all {
				height: 35%;
				display: flex;
				flex-direction: column;
				.warning-main {
					flex: 1;
					display: flex;
					overflow: hidden;
					
					.warning-info {
						height: 100%;
						width: 70%;
						overflow: hidden;
						.info-title {
							font-size: 18px;
							color: #e61a29;
							margin-bottom: 10px;
						}
						.temp-tbody{
							max-height: calc(100% - 35px);
							overflow: hidden;
						}
						.info-ul {
							max-height: calc(100% - 35px);
							overflow-y: scroll;
							margin-right: 20px;
							.info-li {
								font-size: 14px;
								padding: 6px 0px;
								color: #f0f0f0;
								display: flex;
								justify-content: center;
							}
							.info-span {
								text-align: left;
								display: inline-block;
								font-weight: normal;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
							}
							&::-webkit-scrollbar {
								width: 8px;
								height: 57px;
								background-color: transparent;
							}
							&::-webkit-scrollbar-track {
								border-radius: 4px;
								background-color: transparent;
							}
							&::-webkit-scrollbar-thumb {
								border-radius: 4px;
								background: #283345;
							}
						}
					}
					.warning-chart {
						width: 30%;
						height: 100%;
					}
				}
			}

			// 重点人员录入统计
			.important-all {
				height: 60%;
				.important-chart {
					position: relative;
					top: -40px;
					height: calc(100% - 40px);
				}
			}
		}

		// 重点人员所在单位检测情况
		.content-center {
			width: 550px;
			padding: 0 40px;
			height: 100%;
			display: flex;
			flex-direction: column;
			// 进度条
			.bar2 {
				display: flex;
				flex-direction: column;
				margin-bottom: 20px;
				.bar2-top {
					display: flex;
					align-items: center;
					flex: 1;
					margin-bottom: 10px;
					.first-child1 {
						width: 14px;
						height: 14px;
						background-image: linear-gradient(90deg, #ec7777 0%, #f4152a 100%), linear-gradient(#1c95f2, #1c95f2);
						background-blend-mode: normal, normal;
						border-radius: 50%;
						text-align: center;
						line-height: 14px;
						font-size: 12px;
						margin-right: 5px;
						color: #fff;
					}
					.first-child2 {
						width: 14px;
						height: 14px;
						background-image: linear-gradient(-90deg, #fd4107 0%, #ffb490 100%), linear-gradient(#1c95f2, #1c95f2);
						background-blend-mode: normal, normal;
						border-radius: 50%;
						text-align: center;
						line-height: 14px;
						font-size: 12px;
						margin-right: 5px;
						color: #fff;
					}

					.first-child3 {
						width: 14px;
						height: 14px;
						background-image: linear-gradient(-90deg, #f68d0c 0%, #fedaad 100%), linear-gradient(#1c95f2, #1c95f2);
						background-blend-mode: normal, normal;
						border-radius: 50%;
						text-align: center;
						line-height: 14px;
						margin-right: 5px;
						font-size: 12px;
						color: #fff;
					}
					.first-child4 {
						width: 14px;
						height: 14px;
						background-image: linear-gradient(-90deg, #4480fb 0%, #71dfff 100%), linear-gradient(#1c95f2, #1c95f2);
						background-blend-mode: normal, normal;
						border-radius: 14px;
						text-align: center;
						line-height: 14px;
						font-size: 12px;
						margin-right: 5px;
						color: #fff;
					}
					.name2 {
						margin-left: 5px;
						width: 38%;
						font-size: 14px;
						flex: 8;
					}
					span {
						font-size: 14px;
						color: #f0f0f0;
						flex: 1;
					}
				}
				.bar2-center {
					display: flex;
					span {
						font-size: 12px;
						color: #f0f0f0;
						&:nth-child(1) {
							flex: 1;
						}
					}
				}
				.bar2-bottom {
					display: flex;
					flex: 1;
					.bar_one2 {
						width: 100%;
						height: 12px;
						background-color: #f5d08b;
						border-radius: 6px;
						margin: 4px 0 0 0px;
						position: relative;

						div {
							width: auto;
							height: 12px;
							background-image: linear-gradient(90deg, #05e7e7 0%, #05e7e7 100%);
							background-blend-mode: normal, normal;
							border-radius: 6px;
							position: absolute;
							top: 0;
							left: 0;
						}
					}
				}
			}

			// 滚动条
			.progress_list {
				// height: 100%;
				flex: 1;
				overflow-y: scroll;
				padding-right: 20px;
				&::-webkit-scrollbar {
					width: 8px;
					height: 57px;
					background-color: transparent;
				}
				&::-webkit-scrollbar-track {
					border-radius: 4px;
					background-color: transparent;
				}
				&::-webkit-scrollbar-thumb {
					border-radius: 4px;
					background: #283345;
				}
			}
		}

		.content-right {
			height: 100%;
			width: 650px;
			// 重点人员核酸检测任务完成情况
			.finish-all {
				height: 60%;
				.finish-chart {
					position: relative;
					top: -50px;
					height: calc(80% + 50px);
				}
			}
			// 近六期重点人员采样统计
			.statistic-all {
				height: 40%;
				.statistic-chart {
					position: relative;
					top: -45px;
					height: calc(80% + 45px);
				}
			}
		}
	}
}
</style>
